<template>
	<div class="mobilePageStateList" ref="stateRefMobile">
		<div class="goBackButtonBox">
			<div @click="handleClosed" class="item cursor-pointer el-icon-arrow-left font24"></div>
		</div>
		<div>
			<div class="textCenter shs-flex  topBox userSelectNone ">
				<div :class='{"NavigationItem":true,"active":pageConfig.selectValue==3}'
					@click="pageConfig.selectValue=3">
					待审核
				</div>
				<div :class='{"NavigationItem":true,"active":pageConfig.selectValue==4}'
					@click="pageConfig.selectValue=4">
					拒绝
				</div>
				<div :class='{"NavigationItem":true,"active":pageConfig.selectValue==0}'
					@click="pageConfig.selectValue=0">
					封禁
				</div>
			</div>
			<div class="stateList" v-loading="stateListLoading">
				<template v-for="item,itemIndex in stateList">
					<div class="item" :key="item.stateId">
						<div class="shs-flex shs-flex-start position-relative" @click="handleStateShow(item.stateId)">
							<el-image class="userUrl" :src="item.fromUrl+'?w=200&h=200&q=75'" fit="fill">
								<div slot="error" class="image-slot">
									<el-image class="userUrl"
										:src="$handledImageError(item.fromUrl+'?w=200&h=200&q=75','tx')" fit="fill">
									</el-image>
								</div>
							</el-image>

							<div class="stateBox">
								<div class="headerBox marginL5">
									<div class="color-smill overflow">{{item.fromUsername}}</div>
									<el-tag class="color-smill" v-if="item.status==1" type='warning'>通过</el-tag>
									<el-tag class="color-smill" v-else-if="item.status==0" type='info'>封禁</el-tag>
									<el-tag class="color-smill" v-else-if="item.status==3" type='warning'>待审核</el-tag>
									<el-tag class="color-smill" v-else-if="item.status==4" type='danger'>未通过</el-tag>
									<el-tag class="color-smill" v-else-if="item.status==5" type='danger'>已删除</el-tag>
									<el-tag class="color-smill" v-else type='danger'>异常</el-tag>
								</div>
								<div class="marginL5 stateContent shs-text-ellipsis-5">{{item.content}}</div>
							</div>

						</div>
						<div class="stateImagesBox">
							<template v-for="imagesItem,index in item.images" v-if="index<3">
								<div class="stateImages" :key="imagesItem.uniqueID">
									<video-play v-if="imagesItem.type=='video/mp4'" :imagesItem='imagesItem' ></video-play>
									<el-image v-else :src="`${imagesItem.path}?w=148&h=148&q=75`" fit='cover' class="images-item"
										@click="handleStateShow(item.stateId)"></el-image>
								</div>
							</template>
						</div>
						<div class="statetags">
							<el-tag v-for="tagItem,tagindex in item.tags" class="state-tag" :key="tagItem.key"
								:disable-transitions="false">{{tagItem.lable}}</el-tag>
						</div>
						<div class="color-smill font12 marginT5 marginB5">
							<span>[{{item.VisibilityLabel}}] </span><span>{{item.createTime}}</span>
						</div>
						<div class="shs-like" @click="handledLike(item)">
							<el-statistic :value="computedLike(item)" title="">
								<template slot="suffix">
									<span>
										<i class="iconfont icon-xihuancopy" style="color:red"
											v-show="!!item.islike"></i>
										<i class="iconfont icon-xihuancopy" v-show="!item.islike"></i>
									</span>
								</template>
							</el-statistic>
						</div>

					</div>
				</template>
				<template v-if="stateList.length==0">
					<div class="textCenter zwdtBox">
						<i class="iconfont icon-queshengye zwdtIcon"></i>
						<div class="color-smill userSelectNone">暂无动态</div>
					</div>

				</template>
				<div class=" textCenter color-smill cursorPointer" v-show="msgConfig.msglistResults"
					@click="handleChandeContent">查看更多消息</div>
			</div>

		</div>

	</div>
</template>

<script>
	import {
		getAuditList,
		getStateHotList,
		Statelike,
		StateUnlike,
	} from "@/api/state"
	import {
		imageNowIP
	} from "@/utils/config"
	import {
		throttle,
		debounce,
		uniqueE
	} from "@/utils/common"
	import {
		formatTime
	} from "@/utils/base"
	import VideoPlay from "@/components/VideoPlay"
	export default {
		name: "stateAuditPage",
		components:{
			VideoPlay
		},
		data() {
			return {
				imageNowIP,
				addStateShow: false,
				showStateShow: false,
				stateListLoading: true,
				pageConfig: {
					pageSize: 10, //条数
					pageNum: 1, //页数 第n页
					selectValue: 3, //显示哪一个
				},

				stateList: [], //动态列表
				activeStateId: 0, //激活详情页 其他用户ID
				msgConfig: {
					minScrollBottom: 100, //距离msg底部height 小于？就查询
					isExecuteShowMore: false, //距离msg？部height
					msglistResults: false, //msg查询结果 false 终止查询
				},
				VisibilitysHuixian: ["全部可见", "好友可见", "私密"]
			}
		},
		mounted() {
			let _this = this
			if (this.$route.params.selectValue != undefined) {
				this.isexecute = false
				this.pageConfig.selectValue = this.$route.params.selectValue
			}

			this.pageConfig.pageNum = 1
			this.pageConfig.pageSize = 10;
			this.handledGetList()
		},
		destroyed() {
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo
			},

		},
		methods: {
			uniqueE,

			computedLike(item) {
				return item.islike ? item.like + 1 : item.like
			},
			//点赞
			handledLike(item) {
				item.islike = !!!item.islike
				this.handledRealLike(item)
			},
			//real点赞
			handledRealLike: debounce(function(item) {
				if (item.islike) {
					Statelike({
						stateId: item.stateId,
						code: "+"
					})
				} else {
					Statelike({
						stateId: item.stateId,
						code: "-"
					})
				}
			}, 1000, true),
			handleChandeContent: debounce(function() {
				this.pageConfig.pageNum += 1
				this.msgConfig.msglistResults = false
				this.handledGetList(true)
			}),
			/*获取动态列表*/
			handledGetList(code = false) {
				if (!code) {
					this.stateList = []
				}
				//loding
				this.stateListLoading = true;
				let _this = this;
				_this.msgConfig.isExecuteShowMore = false
				getAuditList(_this.pageConfig).then(res => {
					_this.stateListLoading = false;
					_this.isexecute = true
					let list = [...res.data];
					if (list.length == 0) {
						_this.msgConfig.msglistResults = false
					} else {
						_this.msgConfig.msglistResults = true
					}
					list.forEach((item, index, arr) => {
						let tags = item.tags ? item.tags.split(",") : []
						item.images = item.images ? JSON.parse(item.images) : []
						// item.content = item.content.substring(0, 200);
						for (let i = 0; i < item.images.length; i++) {
							item.images[i].uniqueID =item.images[i].uniqueID|| _this.uniqueE(8, 16)
						}
						let itemtags = []
						for (let i = 0; i < tags.length; i++) {
							itemtags[i] = {
								lable: tags[i],
								key: _this.uniqueE(8, 16)
							}
						}
						item.tags = itemtags
						item.islike = false
						item.VisibilityLabel = this.VisibilitysHuixian[item.Visibility - 1] || "err";
						item.createTime = formatTime(item.createTime)
						_this.msgConfig.isExecuteShowMore = true
					})
					if (code) {
						_this.stateList = [..._this.stateList, ...list]
					} else {
						_this.stateList = list
					}
				}).catch(err => {
					_this.stateListLoading = false;
					_this.isexecute = true
				})
			},

			// 显示动态详情页
			handleStateShow(stateId) {
				this.$router.push({
					name: "auditshow",
					params: {
						code: stateId,
						selectValue: this.pageConfig.selectValue
					}
				})
			},
			//关闭
			handleClosed() {
				this.$router.push({
					name: "home",
					params: {}
				})
			},

		},
		watch: {
			"pageConfig.selectValue": {
				deep: true, // 深度监听
				immediate: false, // 页面初始化时是否触发回调
				handler: function(value, oldVal) {
					if (this.isexecute) {
						this.pageConfig.pageNum = 1
						this.handledGetList()
					}

				}
			},
		},

	}
</script>

<style scoped>
	.zwdtBox {
		position: fixed;
		padding: 0;
		margin: 0;
		top: calc(100%/2 - 120px);
		left: calc(100%/2 - 90px);
	}

	.zwdtBox .zwdtIcon {
		color: #80e9ff;
		font-size: 180px;
	}

	.mobilePageStateList {
		position: fixed;
		height: calc(100%);
		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.addState {
		width: 65px;
		height: 65px;
		right: 15px;
		bottom: 100px;
		position: fixed;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 33px;
		background-color: #00aaff;
	}

	.addStateInterior {
		width: 40px;
		height: 40px;
	}

	.topBox {
		width: 100%;
		height: 30px;
		padding: 10px 0 0 0;
		margin: 0;
		margin-top: 40px;
		top: 0px;
		right: 0px;
		position: fixed;
		z-index: 222;
		background-color: #fff;
		justify-content: space-around;
	}

	.topBox .NavigationItem {
		width: calc(100%/3);
		height: 100%;
		line-height: 30px;
		border-radius: 18px;
		margin: 0 10px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.topBox .NavigationItem:nth-child(1) {
		background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	}

	.topBox .NavigationItem:nth-child(2) {
		background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	}

	.topBox .NavigationItem:nth-child(3) {
		background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	}

	.topBox .NavigationItem:active {
		background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
	}

	.topBox .active {
		background-image: linear-gradient(to top, #007adf 0%, #00ecbc 100%) !important;
	}


	/* 标签 start */
	.statetags {
		text-align: left;
	}

	.statetags .state-tag {
		margin: 2px;
	}

	/* 标签 end*/
	.stateList {
		margin-top: 80px;
		margin-bottom: 100px;
		text-align: left;

	}

	.stateList .item {
		margin: 20px 0;
		border-bottom: 1px dashed #00aaff;
	}

	.shs-like {
		/* width: 100px; */
		background-color: #fff;
	}



	/* 图像资源 start*/
	.stateImagesBox {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.stateImagesBox .stateImages {
		width: calc(100%/3);
		min-height: 148px;
		padding: 1px;
		box-sizing: border-box;
		position: relative;
		flex-shrink: 1;
		flex-basis: auto;
	}


	.stateImagesBox .stateImages .images-item {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	/* 图像资源 end*/
	.addStatepageBox :deep(.el-dialog__header) {
		padding: 20px 0 0 0;
	}

	.addStatepageBox :deep(.el-dialog__body) {
		padding: 10px 25px 0;

	}

	/* 内容 */
	.stateContent {
		width: calc(100% - 15px);
		white-space-collapse: preserve-breaks;
		white-space: pre-line;
	}

	/*  */
	.stateBox {
		width: calc(100vw - 70px);
	}

	/* 头部 用户名 操作栏 */
	.headerBox {
		display: flex;
		width: calc(100% - 10px);
		height: 30px;
		line-height: 30px;
		justify-content: space-between;
		align-items: center;
	}


	.stateContent {
		width: calc(100% - 10px);
		white-space-collapse: preserve-breaks;
		white-space: pre-line;
	}

	/* 返回的按钮 */
	.goBackButtonBox {
		font-size: 24px;
		font-weight: 500;
		display: inline-block;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		padding: 0 20px;
		z-index: 22;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: left;
		background-color: #fff;
	}

	.goBackButtonBox .item {
		width: 50px;
	}
</style>